<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ajax分页</title>
</head>

<body>
<style>
    .pagination {font-family: Tahoma;font-size: 12px;height: 22px;margin: 5px 10px;text-align: left;}
    .pagination a,.page-cur,.page-start,.page-end,.page-disabled,.page-skip {
        height:22px;line-height:22px;margin:0 3px 0 0;text-align:center;vertical-align:middle;white-space:nowrap;}
    .pagination input {border-width: 1px;}
    .page-start, .pagination a, .page-end, .page-disabled {border: 1px solid #CCCCCC;padding: 0 5px;}
    .pagination a {text-decoration: none;}
    .page-cur {background-color: #FFEDE1;border: 1px solid #FD6D01;color: #FD6D01;font-weight: 700;padding: 0 5px;}
    .page-disabled {color: #CCCCCC;}
    .page-skip {color: #666666;padding: 0 3px;}
</style>
<div id="pageNav"></div>
</body>

</html>
<script>
    testPage(1);
    function testPage(curPage){

        supage('pageNav','testPage','',curPage,100,5);

    }


    /**

     * @param {String} divName 分页导航渲染到的dom对象ID
     * @param {String} funName 点击页码需要执行后台查询数据的JS函数
     * @param {Object} params 后台查询数据函数的参数，参数顺序就是该对象的顺序，当前页面一定要设置在里面的
     * @param {String} total 后台返回的总记录数
     * @param {Boolean} pageSize 每页显示的记录数，默认是10
     */
    function supage(divId, funName, params, curPage, total, pageSize){
        var output = '<div class="pagination">';
        var pageSize = parseInt(pageSize)>0 ? parseInt(pageSize) : 10;
        if(parseInt(total) == 0 || parseInt(total) == 'NaN') return;
        var totalPage = Math.ceil(total/pageSize);
        var curPage = parseInt(curPage)>0 ? parseInt(curPage) : 1;

        //从参数对象中解析出来各个参数
        var param_str = '';
        if(typeof params == 'object'){
            for(o in params){
                if(typeof params[o] == 'string'){
                    param_str += '\'' + params[o] + '\',';
                }
                else{
                    param_str += params[o] + ',';
                }
            }
            //alert(111);
        }
        //设置起始页码
        if (totalPage > 10) {
            if ((curPage - 5) > 0 && curPage < totalPage - 5) {
                var start = curPage - 5;
                var end = curPage + 5;
            }
            else if (curPage >= (totalPage - 5)) {
                var start = totalPage - 10;
                var end = totalPage;
            }
            else {
                var start = 1;
                var end = 10;
            }
        }
        else {
            var start = 1;
            var end = totalPage;
        }

        //首页控制
        if(curPage>1){
            output += '<a href="javascript:'+funName+'(' + param_str + '1);" title="第一页" class="page-first">«</a>';
        }
        else
        {
            output += '<span class="page-disabled">«</span> ';
        }
        //上一页菜单控制
        if(curPage>1){
            output += '<a href="javascript:'+funName+'(' + param_str + (curPage-1)+');" title="上一页" class="page-previous">‹</a>';
        }
        else{
            output += '<span class="page-disabled">‹</span>';
        }

        //页码展示
        for (i = start; i <= end; i++) {
            if (i == curPage) {
                output += '<a href="javascript:;" class="page-cur">' + curPage + '</a>';
            }
            else {
                output += '<a href="javascript:'+funName+'(' + param_str + i + ');">' + i + '</a>';
            }
        }
        //下一页菜单控制
        if(totalPage>1 && curPage<totalPage){
            output += '<a title="下一页" href="javascript:'+funName+'('+param_str + (curPage+1)+');" class="page-next">›</a>';
        }
        else{
            output += '<span class="page-disabled">›</span>';
        }
        //最后页控制
        if(curPage<totalPage){
            output += '<a title="最后页" href="javascript:'+funName+'('+param_str + totalPage+');" class="page-end">»</a>';
        }
        else{
            output += '<span class="page-disabled">»</span>';
        }

        output += '</div>';
        //渲染到dom中
        document.getElementById(divId).innerHTML = output;
    };
</script>
</body>
</html>